new Vue({
    my_melo: this.my_melo,
    kuromi: this.kuromi,
    cherries: this.cherries,
    inputMessage: this.inputMessage,
    el: '#wechat',
    contacts: this.contacts,
    data: {
        divForContact: "divForContact",
        contacts: [{
            type: 'contacts',
            head_portrait: 'imageFile/img_24.png',
            contactsCSS: 'broadside',
            id: 'kuromi',
            name: '酷洛米',
            preview: ''
        },

            {
                type: 'contacts',
                head_portrait: 'imageFile/img_24.png',
                contactsCSS: 'broadside',
                name: '酷洛米',
                id: 'kuromi',
                preview: ''
            }, {
                type: 'contacts',
                head_portrait: 'imageFile/img_25.png',
                contactsCSS: 'broadside',
                name: '美乐蒂',
                id: 'my_melo',
                preview: ''
            }, {
                type: 'contacts',
                head_portrait: 'imageFile/img.png',
                contactsCSS: 'broadside',
                id: 'cherries',
                name: '樱桃',
                preview: ''
            },

        ],
        broadsideData: [{
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'img_1.png',
            subscription_data_name: '订阅号 ',
            target: 'ture',
            name: '订阅号  ',
            preview: '国家数据局 2024年3月份居民消费...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '中华人民共和国国防部',
            target: 'ture',
            name: '国家安全',
            preview: '国防部：祖国统一 台湾当归，解放军...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'img_2.png',
            subscription_data_name: '股市快讯',
            target: 'ture',
            name: '股市快讯',
            preview: '最新股市动态与行情分析，投资需谨...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'img_3.png',
            subscription_data_name: '健康养生',
            target: 'ture',
            name: '健康养生',
            preview: '健康生活方式与养生秘诀，健康每一天...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'img_4.png',
            subscription_data_name: '时尚潮流',
            target: 'ture',
            name: '时尚潮流',
            preview: '最新时尚资讯与潮流趋势，引领时尚...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'img_5.png',
            subscription_data_name: '体育新闻',
            target: 'ture',
            name: '体育新闻',
            preview: '体育赛事报道与精彩瞬间，热血激情...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '美食天地',
            target: 'ture',
            name: '美食天地',
            preview: '美食推荐与烹饪技巧，尽享味蕾盛宴...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '教育资讯',
            target: 'ture',
            name: '教育资讯',
            preview: '教育政策与学校新闻，关注孩子成长...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '房产动态',
            target: 'ture',
            name: '房产动态',
            preview: '房地产市场动态与房价走势，投资置业...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '科技新品',
            target: 'ture',
            name: '科技新品',
            preview: '科技创新产品发布与评测，科技改变...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '旅游攻略',
            target: 'ture',
            name: '旅游攻略',
            preview: '热门旅游景点推荐与攻略，畅游天下...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '娱乐快报',
            target: 'ture',
            name: '娱乐快报',
            preview: '明星八卦与影视资讯，娱乐无极限...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '职场动态',
            target: 'ture',
            name: '职场动态',
            preview: '职场新闻与就业信息，职业规划必备...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '环保行动',
            target: 'ture',
            name: '环保行动',
            preview: '环保知识与绿色生活倡议，守护地球家...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '社会热点',
            target: 'ture',
            name: '社会热点',
            preview: '社会热点事件与深度解读，关注社会动...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '金融投资',
            target: 'ture',
            name: '金融投资',
            preview: '金融市场动态与投资指南，财富增值之...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '艺术展览',
            target: 'ture',
            name: '艺术展览',
            preview: '艺术展览与作品赏析，感受艺术魅力...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '读书分享',
            target: 'ture',
            name: '读书分享',
            preview: '新书推荐与阅读感悟，启迪心灵之旅...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '电影资讯',
            target: 'ture',
            name: '电影资讯',
            preview: '最新电影资讯与影评分析，观影必备参...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '游戏世界',
            target: 'ture',
            name: '游戏世界',
            preview: '游戏更新与玩家交流，游戏乐趣无穷...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '汽车资讯',
            target: 'ture',
            name: '汽车资讯',
            preview: '汽车市场动态与车型介绍，驾驭未来出...'
        }, {
            type: 'broadside',
            broadsideCSS: 'broadside',
            subscription_data_text: '国防部：祖国统一 台湾当归，解放军始终以行动说话',
            subscription_data_img: 'imageFile/img_19.png',
            subscription_data_representative_img: 'imageFile/img_20.png',
            subscription_data_name: '汽车资讯',
            target: 'ture',
            name: '汽车资讯',
            preview: '汽车市场动态与车型介绍，驾驭未来出...'
        },],
        target_item: '',
        show_title: '',
        cycle_index: 5,
        cycle_index2: 3,
        cycle_index3: 9,
        kuromi: [{
            type: 'object',
            messageText: '我是酷洛米',
            headImage: 'imageFile/img_24.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'oneself',
            messageText: '哦',
            headImage: 'imageFile/img.png',
            div1Class: 'replyCSS',
            imgClass: 'head_image',
            spanClass: 'reply_messageBoxCss',
            span2Class: 'reply_messageCss',
            timestamp: new Date().toLocaleString()
        },],
        my_melo: [{
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'object',
            messageText: '我是美乐蒂',
            headImage: 'imageFile/img_25.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'oneself',
            messageText: '哦',
            headImage: 'imageFile/img.png',
            div1Class: 'replyCSS',
            imgClass: 'head_image',
            spanClass: 'reply_messageBoxCss',
            span2Class: 'reply_messageCss',
            timestamp: new Date().toLocaleString()
        },],
        cherries: [{
            type: 'object',
            messageText: '我是樱桃',
            headImage: 'imageFile/img.png',
            div1Class: 'objectCSS',
            imgClass: 'object_head_image',
            spanClass: 'messageBoxCss',
            span2Class: 'messageCss',
            timestamp: new Date().toLocaleString()
        }, {
            type: 'oneself',
            messageText: '哇!樱桃',
            headImage: 'imageFile/img.png',
            div1Class: 'replyCSS',
            imgClass: 'head_image',
            spanClass: 'reply_messageBoxCss',
            span2Class: 'reply_messageCss',
            timestamp: new Date().toLocaleString()
        },],
        messageTarget: '',
        inputMessage: '',
        foldText: '▼',
        RightFoldText: '◀',
        inputArea: 'inputArea',
        broadsideRightCSS: 'broadsideRight',
        empty: 'MessageNoEmpty',
    },
    watch: {},
    computed: {},
    methods: {
        my_melo: this.my_melo,
        kuromi: this.kuromi,
        cherries: this.cherries,
        inputMessage: this.inputMessage,
        target_item: this.target_item,
        foldText: this.foldText,
        broadsideRightCSS: this.broadsideRightCSS,
        sendMessage(name) {
            if (this.inputMessage !== '' && this.inputMessage !== null) {
                name.push({
                    type: 'oneself',
                    messageText: this.inputMessage,
                    headImage: 'imageFile/img.png',
                    div1Class: 'replyCSS',
                    imgClass: 'head_image',
                    spanClass: 'reply_messageBoxCss',
                    span2Class: 'reply_messageCss',
                    timestamp: new Date().toLocaleString()
                });
                this.replySendMessage(name)
                this.target_item.preview = name[name.length - 1].messageText;
                this.inputMessage = '';
            } else if (this.inputMessage === '' || this.inputMessage === null) {
                this.empty = 'MessageEmpty';
                setTimeout(() => {
                    this.empty = 'MessageNoEmpty'
                }, 2000);
            }
        },
        replySendMessage(name) {
            const prompt = this.inputMessage;
            console.log(this.inputMessage)
            fetch("/test/vivogpt?prompt=" + encodeURIComponent(prompt))
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应异常');
                    }
                    return response.json();
                })
                .then(data => {
                    name.push({
                        type: 'object',
                        messageText: data.data.content,
                        headImage: name[0].headImage,
                        div1Class: 'objectCSS',
                        imgClass: 'object_head_image',
                        spanClass: 'messageBoxCss',
                        span2Class: 'messageCss',
                        timestamp: new Date().toLocaleString()
                    });
                    this.target_item.preview = this.messages[this.messages.length - 1].messageText;
                    this.inputMessage = '';
                })
                .catch(error => {
                    console.error('错误:', error);
                    // 处理错误情况，例如给用户一个友好的提示
                });
            console.log(name)
        },


        broadsideRightCSSF() {
            if (this.broadsideRightCSS === 'broadsideRight') {
                this.RightFoldText = '▶';
                this.broadsideRightCSS = 'broadsideRight2';

            } else if (this.broadsideRightCSS === 'broadsideRight2') {
                this.RightFoldText = '◀';
                this.broadsideRightCSS = 'broadsideRight';

            }
        },
        fold() {
            if (this.foldText === '▼') {
                this.divForContact = "divForContact2"
                this.inputArea = 'inputArea2';
                this.foldText = '▲'
            } else {
                this.divForContact = "divForContact"
                this.foldText = '▼';
                this.inputArea = 'inputArea';
            }
        },
        onclick(target) {
            this['contacts'].forEach((item) => {
                if (item === target) {
                    item.contactsCSS = 'onclick1';
                    this.target_item = target;
                    if (item.id === "my_melo") {
                        this.messageTarget = this.my_melo
                    } else if (item.id === "kuromi") {
                        this.messageTarget = this.kuromi
                    } else if (item.id === "cherries") {
                        this.messageTarget = this.cherries
                    }
                    this['show_title'] = item.name
                } else item.contactsCSS = "broadside";
            })
            this['broadsideData'].forEach((item) => {
                if (item === target) {
                    item.broadsideCSS = 'onclick1';
                    this.target_item = target;
                    this['show_title'] = item.name
                } else item.broadsideCSS = "broadside";
            });
        },
        messageEvent(event) {
            if (event.key === 'name') {
                this.name = JSON.parse(event.newValue);
            }
        }
    }
});
window.onload = function () {
    setInterval(function scrollToBottom() {
        const element = document.getElementById("scroll"); // 替换成你想要滚动到的元素的ID
        element.scrollTop = element.scrollHeight;
    }, 10)
}


